<template>
  <div class="page flex-col justify-between">
    <div class="body flex-col">
      <!-- <div class="block_4 flex-col"></div> -->
      <div class="block_4">
        <div class="block_7 flex-row justify-between">
          <div class="section_1 flex-col"></div>
          <div class="text-wrapper_2 flex-col justify-between">
            <span class="text_14">潇潇暮雨</span>
            <span class="text_15">04-12</span>
          </div>
        </div>
        <span class="text_16">人间值得。</span>
        <div class="block_8 flex-col">
          <div class="block8_left">
            <img
              class="image_4"
              referrerpolicy="no-referrer"
              src="https://lanhu.oss-cn-beijing.aliyuncs.com/pskxmimzd6nljq2hbem72qsm6f36dzb2dpdc909e0e9-60b6-4f6a-afeb-807424bc16dc"
            />
          </div>
          <div class="block8_right">
            <div class="text-wrapper_3 flex-row">
              <span class="text_17">星河旅馆</span>
            </div>
            <div class="section_2 flex-row justify-between">
              <div class="section_3 flex-row justify-between">
                <div class="text-wrapper_4 flex-col">
                  <span class="text_18">6人</span>
                </div>
                <div class="text-wrapper_5 flex-col">
                  <span class="text_19">情感</span>
                </div>
                <div class="text-wrapper_6 flex-col">
                  <span class="text_20">现代</span>
                </div>
                <div class="text-wrapper_7 flex-col">
                  <span class="text_21">新手</span>
                </div>
              </div>
              <span class="text_22">9.6</span>
            </div>
          </div>
        </div>
      </div>
      <div class="block_4">
        <div class="block_7 flex-row justify-between">
          <div class="section_1 flex-col"></div>
          <div class="text-wrapper_2 flex-col justify-between">
            <span class="text_14">潇潇暮雨</span>
            <span class="text_15">04-12</span>
          </div>
        </div>
        <span class="text_16">人间值得。</span>
        <div class="block_8 flex-col">
          <div class="block8_left">
            <img
              class="image_4"
              referrerpolicy="no-referrer"
              src="https://lanhu.oss-cn-beijing.aliyuncs.com/pskxmimzd6nljq2hbem72qsm6f36dzb2dpdc909e0e9-60b6-4f6a-afeb-807424bc16dc"
            />
          </div>
          <div class="block8_right">
            <div class="text-wrapper_3 flex-row">
              <span class="text_17">星河旅馆</span>
            </div>
            <div class="section_2 flex-row justify-between">
              <div class="section_3 flex-row justify-between">
                <div class="text-wrapper_4 flex-col">
                  <span class="text_18">6人</span>
                </div>
                <div class="text-wrapper_5 flex-col">
                  <span class="text_19">情感</span>
                </div>
                <div class="text-wrapper_6 flex-col">
                  <span class="text_20">现代</span>
                </div>
                <div class="text-wrapper_7 flex-col">
                  <span class="text_21">新手</span>
                </div>
              </div>
              <span class="text_22">9.6</span>
            </div>
          </div>
        </div>
      </div>
      <div class="block_4">
        <div class="block_7 flex-row justify-between">
          <div class="section_1 flex-col"></div>
          <div class="text-wrapper_2 flex-col justify-between">
            <span class="text_14">潇潇暮雨</span>
            <span class="text_15">04-12</span>
          </div>
        </div>
        <span class="text_16">人间值得。</span>
        <div class="block_8 flex-col">
          <div class="block8_left">
            <img
              class="image_4"
              referrerpolicy="no-referrer"
              src="https://lanhu.oss-cn-beijing.aliyuncs.com/pskxmimzd6nljq2hbem72qsm6f36dzb2dpdc909e0e9-60b6-4f6a-afeb-807424bc16dc"
            />
          </div>
          <div class="block8_right">
            <div class="text-wrapper_3 flex-row">
              <span class="text_17">星河旅馆</span>
            </div>
            <div class="section_2 flex-row justify-between">
              <div class="section_3 flex-row justify-between">
                <div class="text-wrapper_4 flex-col">
                  <span class="text_18">6人</span>
                </div>
                <div class="text-wrapper_5 flex-col">
                  <span class="text_19">情感</span>
                </div>
                <div class="text-wrapper_6 flex-col">
                  <span class="text_20">现代</span>
                </div>
                <div class="text-wrapper_7 flex-col">
                  <span class="text_21">新手</span>
                </div>
              </div>
              <span class="text_22">9.6</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loopData0: [
        {
          lanhuimage0:
            "https://lanhu.oss-cn-beijing.aliyuncs.com/ps5f1tgytmurv7gyxqq4mrqc2zkznurc189cdfc0b27-6133-4c64-a520-4fa1694b8659",
        },
        {
          lanhuimage0:
            "https://lanhu.oss-cn-beijing.aliyuncs.com/psfcfegd2z9zk7rhlynzwmq6ae6mafupxl00190ee4-cbe8-4025-ae4d-261f4882120a",
        },
        {
          lanhuimage0:
            "https://lanhu.oss-cn-beijing.aliyuncs.com/ps2ehxxa7qxbpgv3cs6d1j69kglpi8xlhqd0389d8b0-88a8-498b-8c18-01cec1789a75",
        },
      ],
      constants: {},
    };
  },
  methods: {},
};
</script>
<style scoped>
.page {
  background-color: rgba(255, 255, 255, 1);
  position: relative;
  width: 3.75rem;
}

.block_4 {
  width: 100%;
  height: 1.75rem;
  display: flex;
  flex-direction: column;
  border-bottom: solid 0.005rem #eaeaea;
  /* margin-top: .25rem; */
}

.image_4 {
  width: 0.53rem;
  height: 0.7rem;
  margin: 0rem 0 0.4rem 0rem;
}

.text-wrapper_1 {
  width: 1.34rem;
  height: 0.145rem;
  /* margin: 1.015rem 0 0 .205rem; */
}

.block_6 {
  background-image: linear-gradient(
    90deg,
    rgba(211, 168, 255, 1) 0,
    rgba(255, 255, 255, 1) 0,
    rgba(204, 154, 255, 1) 0,
    rgba(204, 154, 255, 1) 0,
    rgba(143, 32, 255, 1) 100%,
    rgba(143, 32, 255, 1) 100%
  );
  border-radius: 0.005rem 0.005rem 0.01rem 0.005rem;
  width: 0.08rem;
  height: 0.02rem;
  margin: 0.025rem 0 0 0.95rem;
}

.block_7 {
  width: 1.07rem;
  height: 0.4rem;
  margin: 0.1rem 0 0 0.2rem;
}

.section_1 {
  background-color: rgba(187, 187, 187, 1);
  border-radius: 50%;
  width: 0.4rem;
  height: 0.4rem;
}

.text-wrapper_2 {
  width: 0.55rem;
  height: 0.315rem;
}

.text_14 {
  width: 0.55rem;
  height: 0.13rem;
  color: rgba(51, 51, 51, 1);
  font-size: 0.14rem;
  font-family: PingFangSC-Medium;
  text-align: center;
  white-space: nowrap;
  line-height: 0.14rem;
}

.text_15 {
  width: 0.32rem;
  color: rgba(102, 102, 102, 1);
  font-size: 0.12rem;
  font-family: PingFangSC-Light;
  text-align: center;
  white-space: nowrap;
  line-height: 0.12rem;
  margin-top: 0.09rem;
}

.text_16 {
  width: 0.525rem;
  height: 0.115rem;
  color: rgba(51, 51, 51, 1);
  font-size: 0.12rem;
  text-align: justifyLeft;
  white-space: nowrap;
  line-height: 0.12rem;
  margin: 0.095rem 0 0 0.72rem;
}

.block_8 {
  box-shadow: 0rem 0.04rem 0.2rem 0rem rgba(0, 0, 0, 0.1);
  background-color: rgba(255, 255, 255, 1);
  border-radius: 0.1rem;
  height: 0.825rem;
  width: 2.825rem;
  justify-content: center;
  margin: 0.1rem 0 0 0.65rem;
  display: flex;
  flex-direction: row;
}

.text-wrapper_3 {
  width: 0.55rem;
  height: 0.135rem;
  margin: 0.215rem 0 0 0.1rem;
}

.text_17 {
  width: 0.55rem;
  height: 0.135rem;
  color: rgba(51, 51, 51, 1);
  font-size: 0.14rem;
  font-family: PingFangSC-Medium;
  text-align: left;
  white-space: nowrap;
  line-height: 0.14rem;
}

.section_2 {
  width: 2.085rem;
  height: 0.16rem;
  margin: 0.1rem 0 0.215rem 0.1rem;
}

.section_3 {
  width: 1.78rem;
  height: 0.16rem;
}

.text-wrapper_4 {
  border-radius: 23%;
  background-color: #f2e5ff;
  border-radius: 0.08rem;
  height: 0.16rem;
  width: 0.4rem;
}

.text_18 {
  width: 0.18rem;
  height: 0.095rem;
  color: rgba(51, 51, 51, 1);
  font-size: 0.1rem;
  font-family: PingFangSC-Medium;
  text-align: center;
  white-space: nowrap;
  line-height: 0.1rem;
  margin: 0.03rem 0 0 0.11rem;
  /* background-color: #b56cff;
  border-radius: 23%; */
}

.text-wrapper_5 {
  border-radius: 23%;
  background-color: #f2e5ff;
  border-radius: 0.08rem;
  height: 0.16rem;
  margin-left: 0.06rem;
  width: 0.4rem;
}

.text_19 {
  width: 0.2rem;
  height: 0.1rem;
  color: rgba(51, 51, 51, 1);
  font-size: 0.1rem;
  font-family: PingFangSC-Medium;
  text-align: left;
  white-space: nowrap;
  line-height: 0.1rem;
  margin: 0.03rem 0 0 0.1rem;
}

.text-wrapper_6 {
  border-radius: 23%;
  background-color: #f2e5ff;
  border-radius: 0.08rem;
  height: 0.16rem;
  margin-left: 0.06rem;
  width: 0.4rem;
}

.text_20 {
  width: 0.2rem;
  height: 0.1rem;
  color: rgba(51, 51, 51, 1);
  font-size: 0.1rem;
  font-family: PingFangSC-Medium;
  text-align: left;
  white-space: nowrap;
  line-height: 0.1rem;
  margin: 0.03rem 0 0 0.095rem;
}

.text-wrapper_7 {
  border-radius: 23%;
  background-color: #f2e5ff;
  border-radius: 0.08rem;
  height: 0.16rem;
  margin-left: 0.06rem;
  width: 0.4rem;
}

.text_21 {
  width: 0.195rem;
  height: 0.1rem;
  color: rgba(51, 51, 51, 1);
  font-size: 0.1rem;
  font-family: PingFangSC-Medium;
  text-align: left;
  white-space: nowrap;
  line-height: 0.1rem;
  margin: 0.03rem 0 0 0.1rem;
}

.text_22 {
  width: 0.2rem;
  color: rgba(123, 71, 255, 1);
  font-size: 0.15rem;
  font-family: PingFangSC-Semibold;
  text-align: left;
  white-space: nowrap;
  line-height: 0.15rem;
  margin-top: 0.025rem;
}

/* .block_9 {
  width: 1.065rem;
  height: .405rem;
  margin: .205rem 0 0 .2rem;
} */

.section_4 {
  background-color: rgba(187, 187, 187, 1);
  border-radius: 50%;
  width: 0.4rem;
  height: 0.4rem;
  margin-top: 0.005rem;
}

.text-wrapper_8 {
  width: 0.55rem;
  height: 0.32rem;
}

.text_23 {
  width: 0.55rem;
  height: 0.135rem;
  color: rgba(51, 51, 51, 1);
  font-size: 0.14rem;
  font-family: PingFangSC-Medium;
  text-align: center;
  white-space: nowrap;
  line-height: 0.14rem;
}

.text_24 {
  width: 0.355rem;
  color: rgba(102, 102, 102, 1);
  font-size: 0.12rem;
  font-family: PingFangSC-Light;
  text-align: center;
  white-space: nowrap;
  line-height: 0.12rem;
  margin: 0.09rem 0 0 0.005rem;
}

.text_25 {
  width: 2.825rem;
  color: rgba(51, 51, 51, 1);
  font-size: 0.12rem;
  text-align: justifyLeft;
  white-space: nowrap;
  line-height: 0.12rem;
  margin: 0.1rem 0 0 0.715rem;
}

.image_5 {
  z-index: 56;
  position: absolute;
  left: 0.79rem;
  top: 11.03rem;
  width: 0.53rem;
  height: 0.7rem;
}
</style>
